<template>
  <view class="product">
    <!-- 名称 -->
    <u-modal :show="showText" :title="'修改名称'" showCancelButton @cancel="showText=false" @confirm="saveText">
      <view class="slot-content">
        <u--input
            v-model="text"
            border="surround"
            fontSize="24rpx"
            :customStyle="{'height': '30rpx'}"
            focus
        ></u--input>
      </view>
    </u-modal>
    <!-- 图片 -->
    <u-popup :show="showUpload" @close="showUpload = false">
      <view class="upload">
        <u-upload
            :fileList="fileList"
            width="160rpx"
            height="160rpx"
            :deletable="false"
            @afterRead="afterRead"
        ></u-upload>
      </view>
    </u-popup>
    <view class="tip">点击图片可以上传</view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="desc">
          <view class="image" @click="openImage(item)">
            <u--image
                class="img"
                lazy-load
                width="300rpx"
                height="300rpx"
                :fade="true" duration="450"
                :src="baseUrl + item.mainImage.path"
                v-if="item.mainImage"></u--image>
          </view>
          <view class="title">
            {{item.title}}
          </view>
          <view class="price">
            <view class="text">价格: </view>
            <view class="num">￥{{item.price}}</view>
          </view>
          <view class="edit" @click="onText(item)">编辑</view>
          <!--<view class="tip">点击图片可以上传</view>-->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '../../../config/config'
import Shop from '../../../api/shop'
import base64 from '../../../util/base64'
const shopModel = new Shop()

export default {
  props: ['list', 'shop_id'],
  data() {
    return {
      baseUrl: config.baseUrl,
      text: '',
      id: 0,
      showText: false,
      showUpload: false,
      fileList: [],
      image_id: 0
    }
  },
  methods: {
    onText(item) {
      this.text = item.title
      this.showText = true
      this.id = item.id
    },
    // 保存文字
    saveText() {
      this.showText = false
      shopModel.saveProductText({ id: this.id, shop_id: this.shop_id, name: this.text }).then(() => {
        this.$emit('saveText', { id: this.id, text: this.text })
        uni.showToast({
          icon: 'none',
          title: '保存成功'
        })
      })
    },
    openImage(item) {
      this.showUpload = true
      this.image_id = item.id
      console.log(item)
      const url = config.baseUrl + item.mainImage.path
      this.fileList = [{ url }]
    },
    afterRead(e) {
      const { file } = e
      const { url } = file
      const target = `${config.baseUrl}/h5/shop/upload-product?max-width=750&shop_id=${this.shop_id}&id=${this.image_id}`
      // const token = this.$store.getters['User/token']
      // console.log(target, token)
      uni.uploadFile({
        url: target,
        name: 'file',
        filePath: url,
        header: {
          // [config.token_name]: token
        },
        success: response => {
          uni.showToast({
            icon: 'none',
            title: '上传成功'
          })
          let { data } = response
          data = JSON.parse(data)
          const path = data.data.full_name
          const url = config.baseUrl + path
          const list = [{url}]
          this.fileList = list
          this.$emit('upload', { id: this.image_id, image: path })
          // this.$set(this.postForm, 'avatarList', list)
          this.showUpload = false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.upload {
  padding: 50rpx;
}
.tip {
  height: 50rpx;
  color: #999999;
  font-size: 20rpx;
  background: #f3f5f7;
  text-indent: 30rpx;
  display: flex;
  align-items: center;
}
.product {
  background: #f3f5f7;
  padding: 20rpx 20rpx 170rpx 20rpx;
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      box-sizing: border-box;
      width: 50%;
      padding: 10rpx;
      .desc {
        background: white;
        padding: 10rpx 10rpx 50rpx 10rpx;
        border-radius: 10rpx;
        position: relative;
        .image {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .title, .price {
          margin-top: 10px;
          font-size: 24rpx;
        }
        .price {
          display: flex;
          align-items: center;
          color: red;
        }
        .tip {
          padding: 10rpx 0;
          color: #999999;
          font-size: 20rpx;
        }
        .edit {
          display: inline-block;
          background: red;
          color: white;
          position: absolute;
          right: 10rpx;
          bottom: 10rpx;
          padding: 0 5px;
        }
      }
    }
  }
}
</style>
